<template>
  <div class="container">
    <el-card>
      <!-- 标签 -->
      <div class="el-row">
        <!-- 左边 -->
        <div class="el-col el-col-18">
          <el-form label-width="80px" :inline="true">
            <el-form-item label="标签名称">
              <el-input
                style="width: 200px"
                v-model="requestTagsObj.tagName"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="requestTagsObj.state"
                placeholder="请选择"
                size="small"
                style="margin-right: 10px"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="plain" size="small" @click="clearList()">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="searchlist()"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 右边 -->
        <div el-col el-col-6 style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="showTagDiglog = true"
          >
            新增标签
          </el-button>
        </div>
      </div>
      <!-- 显示数据 -->
      <el-alert
        :title="`数据一共${pagingData.total}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      ></el-alert>
      <!-- 表格显示数据 -->
      <el-table :data="tags">
        <el-table-column
          label="序号"
          width="80"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="所属学科"
          align="center"
          prop="subjectName"
        ></el-table-column>
        <el-table-column
          label="标签名称"
          align="center"
          prop="tagName"
        ></el-table-column>
        <el-table-column
          label="创建者"
          align="center"
          prop="username"
        ></el-table-column>
        <el-table-column
          label="创建日期"
          align="center"
          prop="addDate"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="Switchfn(row.id, row.state)">{{
              row.state === 1 ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state !== 1 ? true : false"
              @click="editlist(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state !== 1 ? true : false"
              @click="dellist(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="pagingData.pagesizes"
          :page-size="pagingData.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="pagingData.total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <el-dialog
      :title="formdata.id ? '编辑标签' : '新增标签'"
      :visible.sync="showTagDiglog"
      width="400px"
      @close="btnCancel"
    >
      <el-form :model="formdata" :rules="rules" ref="addlist">
        <el-form-item label="所属学科" prop="subjectID" label-width="80px">
          <el-select
            v-model="formdata.subjectID"
            placeholder="请选择"
            style="width: 280px"
          >
            <el-option
              v-for="(item, index) in lists"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName" label-width="80px">
          <el-input
            placeholder="请输入目录名称"
            v-model="formdata.tagName"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, changeState, simple, add, update } from '@/api/hmmm/tags'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      showTagDiglog: false,
      tags: [], // 表格标签列表
      lists: [], // 标签简单列表
      // 服务器请求标签列表对象
      requestTagsObj: {
        page: 1, // 当前页数
        pagesize: 10, // 每页页面数量
        tagName: '', // 标签名称
        state: null // 状态 1 开启 0 屏蔽
      },
      pagingData: {
        pagesize: 10, // 当前页数
        pagesizes: [5, 10, 20, 50], // 分页每页展示
        total: 0 // 总条数
      },
      // 表单数据
      formdata: {
        tagName: '', // 标签名称
        subjectID: '' // 学科id
      },
      // 表单验证
      rules: {
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        subjectID: [{ required: true, message: '请选择所属学科', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getTabList()
    this.getSimpleList()
  },
  methods: {
    // 获取标签列表
    async getTabList () {
      const { data } = await list(this.requestTagsObj)
      // console.log(data)
      data.items.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD ss:mm:ss')
      })
      this.tags = data.items
      this.pagingData.total = data.counts
    },
    // 获取标签简单列表
    async getSimpleList () {
      const { data } = await simple()
      this.lists = data
    },
    // 删除标签
    async dellist (id) {
      await this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', { type: 'warning' })
      try {
        await remove({ id: id })
        this.$message.success('删除成功')
        this.getTabList()
      } catch (error) {
        console.log('删除失败')
      }
    },
    // 修改
    editlist (row) {
      this.formdata = row
      this.showTagDiglog = true
    },
    // 切换
    Switchfn (id, state) {
      if (state === 1) {
        state = 0
      } else {
        state = 1
      }
      changeState({ id: id, state: state })
      this.$message.success('操作成功')
      this.getTabList()
    },
    // 取消
    btnCancel () {
      this.$refs.addlist.resetFields() // 清除校验
      this.showTagDiglog = false
    },
    // 确认提交
    async btnOK () {
      await this.$refs.addlist.validate()
      if (this.formdata.id) {
        // 编辑
        await update(this.formdata)
        this.$message.success('修改成功')
      } else {
        // 新增
        await add(this.formdata)
        this.$message.success('添加成功')
      }
      this.getTabList()
      this.showTagDiglog = false
    },
    // 搜索
    searchlist () {
      this.getTabList()
    },
    // 清除
    clearList () {
      this.requestTagsObj.state = null
      this.requestTagsObj.tagName = ''
      this.getTabList()
    },
    // 每页条数发生变化
    handleSizeChange (page) {
      this.requestTagsObj.pagesize = page
      this.getTabList()
    },
    // 当前页发生变化
    handleCurrentChange (page) {
      this.requestTagsObj.page = page
      this.getTabList()
    }
  }
}
</script>

<style scoped lang='scss'>
.left {
  width: 25%;
}
</style>
